
<template>
  <keep-alive>
    <div class="d2-theme-container-main-header">
      <contextmenuCom
        :visible.sync="contextmenuFlag"
        :x="contentmenuX"
        :y="contentmenuY"
      >
        <contextmenuListCom
          :menulist="contextmenuList"
          @rowClick="contextmenuClick"
        />
      </contextmenuCom>
      <el-tabs
        class="d2-multiple-page-control d2-multiple-page-sort"
        :value="$route.path"
        type="card"
        @tab-click="item => $router.push({ path: item.name })"
        @tab-remove="name => close(name)"
        @contextmenu.native="handleContextmenu"
      >
        <el-tab-pane
          v-for="item in history"
          :key="item.path"
          :label="item.meta.title"
          :name="item.path"
          :closable="history.length !== 1"
        />
      </el-tabs>
    </div>
  </keep-alive>
</template>

<script>
import { mapState, mapActions } from 'vuex'

import contextmenuCom from '@/publicComponents/contextmenu'
import contextmenuListCom from '@/publicComponents/contextmenu/components/contextmenuList.vue'
export default {
  components: {
    contextmenuCom,
    contextmenuListCom
  },
  data () {
    return {
      contextmenuFlag: false,
      contentmenuX: 0,
      contentmenuY: 0,
      tagName: '',
      contextmenuList: [
        { icon: 'arrow-left', title: '关闭左侧', value: 'left' },
        { icon: 'arrow-right', title: '关闭右侧', value: 'right' },
        { icon: 'magic-stick', title: '关闭其它', value: 'other' }
      ]
    }
  },
  computed: {
    ...mapState('myadmin/pageHistory', ['history'])
  },
  methods: {
    ...mapActions('myadmin/pageHistory', ['removeHistoryByPath']),
    /**
     * @description 右键菜单的 row-click 事件
     * @param {String} command 事件类型
     */
    contextmenuClick (command) {
      if (this.tagName) this.contextmenuFlag = false
      const params = { pageSelect: this.tagName }
      switch (command) {
        case 'left':
          this.closeLeft(params)
          break
        case 'right':
          this.closeRight(params)
          break
        case 'other':
          this.closeOther(params)
          break
      }
    },
    /**
     * @description 右键菜单功能点击
     * @param {Object} event 事件
     */
    handleContextmenu (event) {
      if (this.history.length === 1) return
      let target = event.target

      let flag = false
      if (target.className.indexOf('el-tabs__item') > -1) flag = true
      else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
        target = target.parentNode
        flag = true
      }
      if (flag) {
        event.preventDefault()
        event.stopPropagation()
        this.contentmenuX = event.clientX
        this.contentmenuY = event.clientY
        this.tagName = target.getAttribute('aria-controls').slice(5)
        this.contextmenuFlag = true
      }
    },
    closeLeft ({ pageSelect }) {
      let index = this.history.findIndex(item => item.path === pageSelect)
      let p = []
      for (let i = 0; i < index; i++) {
        p.push(this.history[i].path)
      }
      p.forEach(i => this.close(i))
    },
    closeRight ({ pageSelect }) {
      let index = this.history.findIndex(item => item.path === pageSelect)
      let p = []
      for (let i = this.history.length - 1; i > index; i--) {
        p.push(this.history[i].path)
      }
      p.forEach(i => this.close(i))
    },
    closeOther ({ pageSelect }) {
      let index = this.history.findIndex(item => item.path === pageSelect)

      let p = []
      for (let i = 0; i < this.history.length; i++) {
        if (i === index) continue
        p.push(this.history[i].path)
      }
      p.forEach(i => this.close(i))
    },
    close (path) {
      this.removeHistoryByPath(path)
      // 如果关闭的是正在显示的，跳转列表中第一个
      if (path === this.$route.path)
        this.$router.push({ path: this.history[0].path })
    }
  }
}
</script>
<style lang="scss">
.d2-theme-container-main-header {
  &::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
    font-size: 12px;
  }
  // 多页面控制器
  .d2-multiple-page-control {
    width: calc(100vw - 240px);
    padding-right: 20px;

    .el-tabs__header.is-top {
      margin: 0px;
      .el-tabs__item {
        font-size: 12px;
        height: 30px;
        line-height: 30px;
      }
    }
    .el-tabs__nav {
      overflow: hidden;
    }
    .el-tabs__nav-prev,.el-tabs__nav-next{
      height: 100%;
      display: flex;
      align-items: center;
    }

    .d2-multiple-page-control-btn {
      position: relative;
      bottom: -1px;
      .el-dropdown {
        .el-button-group {
          .el-button:first-child {
            border-bottom-left-radius: 0px;
          }
          .el-button:last-child {
            border-bottom-right-radius: 0px;
          }
        }
      }
    }
  }
}
</style>
<style scoped>
/deep/ .el-tabs__item.is-active{
  color: #0B085F;
}
/deep/ .el-tabs__item:hover{
  color: #0B085F;
}
</style>

